<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="审批人">
          <el-date-picker v-model="formInline.value" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="模版名称">
          <el-input v-model="formInline.user" placeholder="请输入模版名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="newly">新增运费模版</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="text item">
      <el-table v-loading="loading" :data="tableData" max-height="600" border style="width: 100%">
        <el-table-column type="index" align="center" label="序号" :index="indexMethod" width="60">
        </el-table-column>
        <el-table-column prop="date" align="center" label="模版名称" width="180">
        </el-table-column>
        <el-table-column prop="name" align="center" label="计费方式" width="180">
        </el-table-column>
        <el-table-column prop="address" align="center" label="指定运费地区">
        </el-table-column>
        <el-table-column prop="address" align="center" label="是否启用">
        </el-table-column>
        <el-table-column prop="address" align="center" label="创建时间">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="compile(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="Delete(scope.row)">删除</el-button>
            <el-button size="mini" type="danger" @click="startUsing(scope.row)">启用</el-button>
            <el-button size="mini" type="danger" @click="blockUp(scope.row)">停用</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
        :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">
      </el-pagination>
    </div>
    <el-dialog title="基础信息" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
      <span>
        <el-form ref="form" :model="formDate" label-width="120px">
          <el-form-item label="模版名称">
            <el-input class="inputWit" v-model="formDate.name" placeholder="请输入模版名称"></el-input>
          </el-form-item>
          <el-form-item label="是否启用">
            <el-switch v-model="formDate.is_up" active-color="#13ce66" inactive-color="#ff4949" active-text="启用"
              inactive-text="停用" :active-value='1' :inactive-value='0' @change="switchCage">
            </el-switch>
          </el-form-item>
          <span class="spanMag">
          闪送标准
          </span>
          <el-form-item label="当物品尺寸大于" class="spanBottom">
            <div class="divFlex">
            <el-input class="inputWith" v-model="formDate.name" placeholder="请输入"></el-input>
            <span class="spanMin">平方米不可以使用闪送</span>
            <span class="spanMain">当物品重量大于</span>
            <el-input class="inputWith" v-model="formDate.name" placeholder="请输入"></el-input>
            <span class="spanMargin">kg不可使用闪送</span>
          </div>
          </el-form-item>
          <el-form-item label="起送金额：" class="spBottom">
            <div class="divFlex">
            <el-input class="inputWith" v-model="formDate.name" placeholder="请输入"></el-input>
            <span class="spanMargin">元，</span>
            <span class="spanMain">起送范围</span>
            <el-input class="inputW" v-model="formDate.name" placeholder="请输入"></el-input>
            <span class="spanMi">公里</span>
            <span class="spanMain">每增加</span>
            <el-input class="inputW" v-model="formDate.name" placeholder="请输入"></el-input>
            <span class="spanMi">公里，</span>
            <span class="spanMain">增加</span>
            <el-input class="inputW" v-model="formDate.name" placeholder="请输入"></el-input>
            <span class="spanMargin">元</span>
          </div>
          </el-form-item>
          <span class="spanMag">
          闪送标准
          </span>
          <el-form-item label="车厢可容纳重量" class="spanBottom">
            <div class="divFlex">
            <el-input class="inputWith" v-model="formDate.name" placeholder="请输入"></el-input>
            <span class="spanMin">吨</span>
            <span class="spanMain">车厢可容纳体积</span>
            <el-input class="inputWith" v-model="formDate.name" placeholder="请输入"></el-input>
            <span class="spanMargin">米</span>
          </div>
          </el-form-item>
          <el-form-item label="起送金额：">
            <div class="divFlex">
            <el-input class="inputWith" v-model="formDate.name" placeholder="请输入"></el-input>
            <span class="spanMargin">元，</span>
            <span class="spanMain">起送范围</span>
            <el-input class="inputW" v-model="formDate.name" placeholder="请输入"></el-input>
            <span class="spanMi">公里</span>
            <span class="spanMain">每增加</span>
            <el-input class="inputW" v-model="formDate.name" placeholder="请输入"></el-input>
            <span class="spanMi">公里，</span>
            <span class="spanMain">增加</span>
            <el-input class="inputW" v-model="formDate.name" placeholder="请输入"></el-input>
            <span class="spanMargin">元</span>
          </div>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

  </el-card>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      token: sessionStorage.getItem("token"),
      dialogVisible: false,
      formInline: {
        value: '',
        region: ''
      },
      tableData: [],
      //分页器
      total: 0,
      limit: 10,
      page: 1,
      formDate: {},
    }
  },
  methods: {
    onSubmit() {
      console.log('submit!');
    },
    newly() {
      this.dialogVisible = true
    },
    //编辑
    compile() {

    },
    //删除
    Delete() {

    },
    //启用
    startUsing() {

    },
    //停用
    blockUp() {

    },
    // 序号排序
    indexMethod(index) {
      // if (this.token < this.limit) {
      //   return this.total - index;
      // } else {
      //   return (
      //     this.total - (this.currentPage - 1) * this.limit - index
      //   );
      // }
    },
    //分页器
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    handleClose(done) {
      done()
    },
    //启用/停用
    switchCage() {

    }
  }
}
</script>

<style scoped>
.text {
  font-size: 14px;
}
.inputWit{
  width: 300px;
}
.spanMag{
  margin-left: 12px;
  font-size: 17px;
}
.spBottom{
  margin-bottom: 40px;
}
.inputW{
  width: 100px;
}
.spanMargin{
  margin-left: 12px;
}
.spanMi{
  margin:0 12px;
}
.spanMin{
  margin: 0 12px;
}
.spanBottom{
margin-top: 30px;
}
.spanMain{
  margin-right: 12px;
}
.item {
  margin-bottom: 18px;
}
.inputWith{
  width: 200px;
}
.el-button {
  padding: 15px 35px;
  margin-left: 20px;
}
.divFlex{
  display:flex;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 100%;
}
</style>
























































































































</div>